import 'package:flutter/material.dart';
import 'package:znmm/UI/ProductPages/model/product_model.dart';
import 'package:znmm/UI/A_Common/image/cached_network_Image.dart';
import 'package:znmm/config/app_color.dart';

import '../../../config/app_style.dart';
import '../../A_Common/star_rating_bar.dart';

class CategoryListView extends StatelessWidget {
  final Function(ProductModel pModel)? onTap;
  final List<ProductModel> prodcList;

  const CategoryListView({
    Key? key,
    this.onTap,
    required this.prodcList,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MediaQuery.removePadding(
      removeTop: true,
      context: context,
      child: GridView.builder(
        padding: const EdgeInsets.all(10.0),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, // 设置为两列
          crossAxisSpacing: 10.0, // 列之间的间距
          mainAxisSpacing: 10.0, // 行之间的间距
          childAspectRatio: 0.75, // 设置子项的宽高比
        ),
        itemCount: prodcList.length,
        itemBuilder: (_, index) {
          ProductModel furniture = prodcList[index];
          return Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8.0),
              border: Border.all(
                color: Colors.grey,
                width: 0.5,
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
              child: _listViewItem(furniture, index),
            ),
          );
        },
      ),
    );
  }

  Widget _listViewItem(ProductModel pducMol, int index) {
    return GestureDetector(
      onTap: () => onTap?.call(pducMol),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: Center(
              child: ClipRRect(
                borderRadius: BorderRadius.circular(15.0),
                child: pducMol.sourceUrl.isNotEmpty
                    ? CachedNetworkImageLoader(
                        imageUrl: pducMol.sourceUrl,
                      )
                    : Image.asset(pducMol.imagesList[0],
                        width: 150, height: 150),
              ),
            ),
          ),
          const SizedBox(height: 10),
          Padding(
            padding: const EdgeInsets.fromLTRB(3, 0, 3, 0),
            child: Text(
              pducMol.name,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.center,
              style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              StarRatingBar(score: pducMol.averageRating),
              const SizedBox(width: 10),
              Text(pducMol.averageRating.toString(), style: h4Style),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Icon(
                pducMol.stockStatus == "OUT_OF_STOCK"
                    ? Icons.close
                    : Icons.done,
                size: 24,
                color: pducMol.stockStatus == "OUT_OF_STOCK"
                    ? Colors.red
                    : AppColor.blue,
              ),
              const SizedBox(width: 10),
              Expanded(child: Text(pducMol.stockStatus, style: h4Style)),
            ],
          ),
          Text(pducMol.price,
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontSize: 16,
                  color: AppColor.blue,
                  fontWeight: FontWeight.bold)),
          const SizedBox(
            height: 5,
          ),
          Container(
            height: 36,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: Colors.black,
              borderRadius: BorderRadius.circular(2.0),
            ),
            child: const Text(
              "View",
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                  fontWeight: FontWeight.bold),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
        ],
      ),
    );
  }
}




// import 'package:cnus/UI/common/cached_network_Image.dart';
// import 'package:cnus/config/data/product_model.dart';
// import 'package:flutter/material.dart';

// import '../../../config/app_style.dart';
// import '../../common/star_rating_bar.dart';

// class CnCategListView extends StatelessWidget {
//   final Function(ProductModel pModel)? onTap;
//   final List<ProductModel> prodcList;

//   const CnCategListView({
//     Key? key,
//     this.onTap,
//     required this.prodcList,
//   }) : super(key: key);

//   @override
//   Widget build(BuildContext context) {
//     return MediaQuery.removePadding(
//         removeTop: true,
//         context: context,
//         child: ListView.separated(
//           shrinkWrap: true,
//           //reverse: true,
//           physics: const ClampingScrollPhysics(),
//           itemCount: prodcList.length,
//           separatorBuilder: (BuildContext context, int index) {
//             return const Divider(
//               height: 0.2,
//               thickness: 0.2,
//               color: Colors.grey,
//             );
//           },
//           itemBuilder: (_, index) {
//             ProductModel furniture = prodcList[index];
//             return Container(
//               margin: const EdgeInsets.fromLTRB(10, 10, 10, 10),
//               height: 320,
//               decoration: BoxDecoration(
//                 color: Colors.white,
//                 borderRadius: BorderRadius.circular(8.0), // 设置圆角半径为10

//                 border: Border.all(
//                   color: Colors.grey, // 设置边框颜色为黑色
//                   width: 0.5, // 设置边框宽度为1像素
//                 ),
//               ),
//               child: Padding(
//                 padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
//                 child: _listViewItem(furniture, index),
//               ),
//             );
//           },
//         ));
//   }

//   Widget _listViewItem(ProductModel pducMol, int index) {
//     return GestureDetector(
//       onTap: () => onTap?.call(pducMol),
//       child: Column(
//         mainAxisAlignment: MainAxisAlignment.start,
//         crossAxisAlignment: CrossAxisAlignment.start,
//         children: [
//           Expanded(
//               child: Center(
//             child: ClipRRect(
//               borderRadius: BorderRadius.circular(15.0),
//               child: pducMol.sourceUrl.isNotEmpty
//                   ? CachedNetworkImageLoader(
//                       imageUrl: pducMol.sourceUrl,
//                     )
//                   : Image.asset(pducMol.imagesList[0], width: 150, height: 150),
//             ),
//           )),
//           const SizedBox(height: 10),
//           Padding(
//             padding: const EdgeInsets.fromLTRB(3, 0, 3, 0),
//             child: Text(
//               pducMol.name,
//               maxLines: 1,
//               overflow: TextOverflow.ellipsis,
//               textAlign: TextAlign.center,
//               style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
//             ),
//           ),
//           Row(
//             mainAxisAlignment: MainAxisAlignment.start,
//             children: [
//               StarRatingBar(score: pducMol.averageRating),
//               const SizedBox(width: 10),
//               Text(pducMol.averageRating.toString(), style: h4Style),
//             ],
//           ),
//           Row(
//             mainAxisAlignment: MainAxisAlignment.start,
//             children: [
//               Icon(
//                 Icons.close, // 使用Icons.close来表示"close"图标
//                 size: 24, // 设置图标的大小
//                 color: pducMol.stockStatus == "OUT_OF_STOCK"
//                     ? Colors.red
//                     : Colors.black, // 设置图标的颜色
//               ),
//               const SizedBox(width: 10),
//               Expanded(child: Text(pducMol.stockStatus, style: h4Style)),
//             ],
//           ),
//           Text(pducMol.price,
//               textAlign: TextAlign.center,
//               style: const TextStyle(
//                   fontSize: 16,
//                   color: Colors.black,
//                   fontWeight: FontWeight.bold)),
//           const SizedBox(
//             height: 5,
//           ),
//           Container(
//             height: 36,
//             //margin: const EdgeInsets.fromLTRB(10, 0, 10, 0),
//             alignment: Alignment.center,
//             decoration: BoxDecoration(
//               color: Colors.black,
//               borderRadius: BorderRadius.circular(2.0), // 设置圆角半径为10
//             ),
//             child: const Text(
//               "View",
//               style: TextStyle(
//                   color: Colors.white,
//                   fontSize: 16,
//                   fontWeight: FontWeight.bold),
//             ),
//           ),
//           const SizedBox(
//             height: 10,
//           ),
//         ],
//       ),
//     );
//   }
// }
